<template>
    <div class="test2">
        <h2>当前求和为{{ sum }}</h2>
        <button @click="changeSum"> 点击sum+1</button>
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <h2>身高：{{ person.self.height }}</h2>
        <h2>体重：{{ person.self.weight }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changePerson">修改person</button>
        <button @click="changeHeight">修改身高</button>
        <button @click="changeWeight">修改体重</button>
        <br>
        <h2>品牌：{{ car.brand }}</h2>
        <h2>价格：{{ car.price }}</h2>
        <button @click="changeBrand">修改品牌</button>
        <button @click="changePrice">修改价格</button>
        <button @click="changeCar">修改car</button>
    </div>
</template>

<script lang="ts" setup name="testComponent2">
    import { ref, onMounted, watch, reactive, watchEffect } from 'vue';
    let sum = ref(0);
    let person = ref({
        name: '张三',
        age: 18,
        self: {
            height: 180,
            weight: 80
        }
    });
    let car = reactive({
        brand: 'BMW',
        price: 100000
    });
    function changeSum () {
        sum.value++;
    }
    // 监视
    const stopWatch = watch(() => sum.value, (newValue, oldValue) => {
        console.log(`sum的值由${oldValue}变为${newValue}`);
        if (newValue > 10) {
            stopWatch();// 停止监视
        }
    });
    function changeName () {
        person.value.name += '*';
    }
    function changeAge () {
        person.value.age++;
    }
    function changePerson () {
        person.value = {name: '李四', age: 20, self: {height: 170, weight: 70}};
    }
    // 监视(深度监视)
    watch(person, (newValue, oldValue) => {
        console.log(`person的值由${JSON.stringify(oldValue)}变为${JSON.stringify(newValue)}`);
    }, {deep: true});

    function changeBrand () {
        car.brand += '*';
    }
    function changePrice () {
        car.price++;
    }
    function changeCar () {
        Object.assign(car, {brand: 'ewrtyg',price: 1078000})
    }
    watch(car, (newValue, oldValue) => {
        console.log(`car的值由${JSON.stringify(oldValue)}变为${JSON.stringify(newValue)}`);
    }, {deep: true});
    // 监视某个基础类型属性（非基础类型也监视使用此方式并使用深度监视）
    watch(() => car.brand, (newValue, oldValue) => {
        console.log(`car.brand的值由${oldValue}变为${newValue}`);
    });
    function changeHeight () {
        person.value.self.height++;
    }
    function changeWeight () {
        person.value.self.weight++;
    }
    // 监视多个数据
    watch([()=>person.value.self.height, car.price], (newValue, oldValue) => {
        console.log(`person.self.height的值由${oldValue[0]}变为${newValue[0]}`);
        console.log(`car.price的值由${oldValue[1]}变为${newValue[1]}`);
    })
    // 监视回调函数中所有响应式属性
    watchEffect(() => {
        if(person.value.self.height > 180) {
            console.log('person.self.height大于180');
        }
    })
</script>

<style scoped>
.test2 {
    background-color: #f9f9f9; /* 背景颜色 */
    border: 1px solid #ddd; /* 边框 */
    border-radius: 8px; /* 圆角 */
    padding: 16px; /* 内边距 */
    text-align: center; /* 文本居中 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

h2 {
    color: #333; /* 字体颜色 */
    font-size: 1.5rem; /* 字体大小 */
    margin: 0; /* 去掉默认外边距 */
}
</style>